<template>
  <div class="min-h-screen bg-gray-50">
    <BaseHeader @search="handleSearch"></BaseHeader>

    <div class="w-1200 mx-auto pt-16 bg-white h-min-calc">
      <!-- 商品筛选栏 -->
      <GoodsClassNav  @getParams="getParams" @changeListMode="changeListMode" ></GoodsClassNav>
      <!-- 商品展示列表 -->
      <div class="goods-box" v-if="goodsListMode == 'list'">
        <!-- 商品列表 -->
        <div class="goods-list-box">
          <!-- 列表 -->
          <div class="goods-table">
            <div v-if="goodsList.length === 0" class="mx-auto w-36 mt-7">
              <empty/>
            </div>
            <table id="table-1" v-else>
              <thead>
                <tr>
                  <th width="5%">编号</th>
                  <th width="650px">线路名称</th>
                  <th width="10%">线路特色</th>
                  <th width="8%">出港城市</th>
                  <th width="20%">出团日期</th>
                  <th width="7%" align="right">成人价格</th>
                  <th width="7%" align="right">儿童价格</th>
                </tr>
              </thead>
              <tbody>
                <template v-for="(item, index) in goodsList">
                  <tr @click="goGoodsDetail(item.id, item.goodsId)">
                    <td align="center">{{ item.number }}</td>
                    <td class="ellipsis">
                      【{{ item.sub }}】{{ item.goodsName }}
                    </td>
                    <td class="ellipsis">{{ item.labelText }}</td>
                    <td class="ellipsis">{{ item.schepost }}</td>
                    <td class="ellipsis" :title="item.tourDate">
                      {{ item.tourDate }}
                    </td>
                    <td align="right" class="price">
                      {{ item.price > 0 ? item.price + "起" : item.price }}
                    </td>
                    <td align="right" class="price">
                      {{ item.priceChild > 0 ? item.priceChild + "起"  : item.priceChild }}
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 商品展示图片 -->
      <div class="goods-box" v-if="goodsListMode == 'image'">
        <!-- 商品列表 -->
        <div class="goods-list-box">
          <!-- 排序 
          <div class="goods-list-tool">
            <ul>
              <li v-for="(item, index) in goodsTool" :key="index" @click="orderBy(item.en, index)">
                <span :class="{ 'goods-list-tool-active': index === sortIndex }">{{ item.title }}<Icon type="ios-arrow-round-down"/></span>
              </li>
              <li @click="orderBy('price', 5, 'up')" class="price-sort">
                <span :class="{ 'goods-list-tool-active': 5 === sortIndex }">
                  价格
                  <div>
                    <Icon type="md-arrow-dropup" :class="{ 'price-color': sortPriceIndex == 'desc' }" />
                    <Icon type="md-arrow-dropdown" :class="{ 'price-color': sortPriceIndex == 'asc' }" />
                  </div>
                </span>
              </li>
            </ul>
          </div>-->

          <!-- 产品列表 -->
          <div class="goods-list w-full h-full object-cover object-top">
            <div v-if="goodsList.length === 0" class="mx-auto w-36">
              <empty/>
            </div>
            <div class="goods-show-info" v-for="(item, index) in goodsList" :key="index" @click="goGoodsDetail(item.id, item.goodsId)" >
              <div class="goods-show-img">
                <img v-lazy="pictureUrl(item.thumbnail)" style="width: 230px; height: 170px;" />
                <p style="position: absolute; bottom: 3px; left: 3px">
                  <Tag color="error" style="padding: 0 4px">
                    {{ item.ddlx }}
                  </Tag>
                  <Tag
                    color="warning"
                    style="padding: 0 4px"
                    v-if="item.labelText != null"
                    v-for="(text, idx) in labelTextFun(item.labelText)"
                    :key="idx"
                  >
                    {{ text }}
                  </Tag>
                </p>
              </div>

              <!-- 标题 -->
              <div class="goods-show-detail">
                <Tag
                  v-if="item.salesModel === 'WHOLESALE'"
                  class="goods-show-tag"
                  color="purple"
                >
                  批发
                </Tag>
                <span>{{ item.number }}:{{ item.goodsName }}</span>
              </div>

              <!-- 标签 -->
              <div class="goods-show-right">
                <Tag class="goods-show-tag" color="red">
                  {{ item.sub }}
                </Tag>
                <span class="left" v-if="item.labbelText">
                  <span class="post fix"
                    v-for="labbelText in item.labbelText.split(',')"
                    v-if="labbelText != ''"
                    >{{ labbelText }}</span
                  >
                </span>
              </div>

              <!-- 价格 -->
              <div class="goods-show-price">
                <div class="float-left">
                  <span class="unit text-danger">¥ </span>
                  <span class="seckill-price text-danger">{{
                    item.price | unitPrice()
                  }}</span>
                  <span class="qi">起</span>
                </div>
                <div class="float-right" style="height: 30px; line-height: 30px; margin-top: 3px; margin-right: 3px;">
                  <i class="fas fa-eye mr-1 text-#ff6b84"></i>
                  <span class="text-gray-500 text-sm">{{ item.hits }}</span>
                </div>
              </div>

              <!--<div class="goods-show-num"> 已有<span>{{ item.commentNum || 0 }}</span >人评价</div>
              <div class="goods-show-seller">
                <span class="text-bottom" style="color: #e4393c">{{ item.storeName }}</span>
              </div>
              <div class="goods-show-right">
                <Tag class="goods-show-tag" color="red" v-if="item.selfOperated"> 自营 </Tag>
                <Tag class="goods-show-tag" color="blue" v-if="item.goodsType === 'VIRTUAL_GOODS'"> 虚拟 </Tag>
                <Tag class="goods-show-tag" color="blue" v-else-if="item.goodsType === 'PHYSICAL_GOODS'"> 实物 </Tag>
              </div>-->
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="goods-page" v-if="goodsList.length > 0">
        <Page
          show-total
          show-sizer
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          :total="total"
          :page-size="params.pageSize"
        ></Page>
      </div>
    </div>

    <Spin size="large" fix v-if="loading"></Spin>

    <BaseFooter></BaseFooter>
  </div>
</template>

<script>
import { staticUrl } from "@/plugins/request";
import { filterObj } from "@/plugins/Foundation.js";
import GoodsClassNav from "@/components/nav/GoodsClassNav";
import lazy from "@/plugins/lazyload.js";
import * as apiGoods from "@/api/goods";
export default {
  name: "GoodsList",
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      sortIndex: 0, // 排序状态
      sortPriceIndex: false, // 判断价格升序还是降序
      goodsTool: [
        // 排序类型
        { title: "综合", en: "" },
        { title: "销量", en: "buyCount" },
        { title: "评论数", en: "commentNum" },
        { title: "新品", en: "releaseTime" },
      ],
      goodsListMode: "list",
      ddlxs: [], //部门
      goodsList: [], // 商品列表
      loading: false, // 加载状态
      total: 0, // 列表总数
      params: {
        // 请求参数
        pageNo: 1,
        pageSize: 30,
        categoryId: "",
        columnid: "",
        title: "", //skeyword
        menuentyId: "", //menuentyId
        openid: "", //openid
      },
    };
  },
  watch: {
    $route() {
      const keyword = this.$route.query.keyword;
      if (keyword) {
        this.handleSearch(keyword);
      }
      if (this.$route.query.categoryId) {
        let cateId = this.$route.query.categoryId.split(",");
        Object.assign(this.params, this.$route.query);
        //this.params.categoryId = cateId[cateId.length - 1];
        this.params.menuentyId = cateId[cateId.length - 1];
      }

      if (this.$route.query.promotionType) {
        this.params.promotionType = this.$route.query.promotionType;
      }
      if (this.$route.query.promotionsId) {
        this.params.promotionsId = this.$route.query.promotionsId;
      }
      this.getGoodsList();
    },
  },
  directives: {
    lazy
  },
  methods: {
    // 搜索
    handleSearch(key) {
      //this.$route.query.keyword = key
      this.params.title = key;
      this.params.pageNo = 1;
      this.total = 0;
      this.getGoodsList();
    },
    // 搜索
    search(key) {
      handleSearch(key)
    },
    // 排序
    orderBy(data, index) {
      this.sortIndex = index;
      this.params.sort = data;
      this.params.order = "desc";
      if (data === "price") {
        if (!this.sortPriceIndex) {
          this.sortPriceIndex = "asc";
        } else {
          this.sortPriceIndex === "desc"
            ? (this.sortPriceIndex = "asc")
            : (this.sortPriceIndex = "desc");
        }
        this.params.order = this.sortPriceIndex;
      } else {
        this.sortPriceIndex = false;
      }
      this.getGoodsList();
    },
    // 跳转商品详情
    goGoodsDetail(skuId, goodsId) {
      let routeUrl = this.$router.resolve({
        path: "/goodsCruise",
        query: { goodsId },
      });
      // console.info(routeUrl); skuId,
      window.open(routeUrl.href, "_GoodsDetail");
    },
    // 分页 修改页码
    changePageNum(val) {
      this.params.pageNo = val;
      this.getGoodsList();
    },
    // 分页 修改页数
    changePageSize(val) {
      this.params.pageNo = 1;
      this.params.pageSize = val;
      this.getGoodsList();
    },

    // 获取商品列表
    getGoodsList() {
      this.loading = true;
      apiGoods
        .goodsList(filterObj(this.params))
        .then((res) => {
          this.loading = false;
          let data = res.result;
          if (res.success) {
            (this.ddlxs = []),
              (this.goodsList = []),
              data.records.forEach((item) => {
                let obj = {
                  id: item.id,
                  goodsId: item.id,
                  ddlx: item.ddlx,
                  thumbnail: item.imageHref,
                  price: item.price,
                  priceChild: item.priceChild,
                  number: item.number, // "number": "L38",
                  sub: item.sub, // "sub": "圣地亚龙湾",
                  goodsName: item.title, // "title": "南宁三亚往返5日游（12月）",
                  hits: item.hits, // "hits": 4,
                  schepost: item.schepost, // "schepost": "南",
                  labelText: item.labelText, // "labelText": null
                  tourDate: item.tourDate,
                };
                this.goodsList.push(obj);
                this.ddlxs.push(item.ddlx);
              });

            this.ddlxs = [...new Set(this.ddlxs)];
            // this.goodsList = data.records;
            // this.total = data.total;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    getParams(val) {
      // 筛选条件回显
      Object.assign(this.params, val);
      this.getGoodsList();
    },

    changeListMode(v) {
      //切换模式
      //console.info("切换模式", v);
      this.goodsListMode = v;
    },

    pictureUrl(path) {
      if (!path) {
        return "";
      } else if (path.indexOf("photos/") >= 0) {
        return staticUrl + "/" + path;
      } else {
        return path;
      }
    },

    labelTextFun(values) {
      if (!values) {
        return [];
      } else {
        return values.split(",");
      }
    },
  },
  created() {
    if (this.$route.query.categoryId) {
      let cateId = this.$route.query.categoryId.split(",");
      Object.assign(this.params, this.$route.query);
      //this.params.categoryId = cateId[cateId.length - 1];
      this.params.menuentyId = cateId[cateId.length - 1];
    } else {
      Object.assign(this.params, this.$route.query);
    }

    this.params.categoryId = "";
    this.getGoodsList();
  },
  components: {
    GoodsClassNav,
  },
};
</script>

<style scoped lang="scss">
@import "../assets/styles/goodsList.scss";
@import "~@/assets/font/symbol/iconfont.css";
@import "~@/components/cruise/css/detail.css";
@import "~@/components/cruise/css/core.css";

.cate-nav {
  margin-top: 10px;
}
.goods-show-info > .goods-show-seller > .goods-show-buyer {
  width: 35px;
  height: 17px;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  align-content: center;
  padding: 0 3px;
  background-color: #e23a3a;
}

.goods-show-info {
  span.qi {
    font-size: 20rpx;
    margin-right: 8rpx;
    line-height: 20rpx;
    height: 20rpx;
    position: relative;
    bottom: -16rpx;
  }
}

.goods-show-tag {
  height: 18px;
  line-height: 14px;
  white-space: nowrap;
  text-align: center;
  align-items: center;
  padding: 1px 3px 0 3px;
  margin-top: -2px;
}

.goods-show-seller {
  // padding:3px 0;
  vertical-align: middle;
}
.container {
  width: 1200px;
  min-width: 1200px;
  position: relative;
  min-height: calc(100vh - 50px - 100px);
}

.h-min-calc{
  min-height: calc(100vh - 50px - 103px);
}

.price-sort:hover {
  color: #e23a3a;
}
.goods-box {
  display: flex;
}
/* ---------------侧边广告栏开始------------------- */

.goods-show-right {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
}

/* ---------------商品栏开始------------------- */
.goods-list-box {
  position: relative;
  width: 100%;
  // margin-left: 15px;
  // width: calc(100% - 215px);
}
.goods-list-tool {
  width: 100%;
  height: 38px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.goods-list-tool ul {
  padding-left: 15px;
  font-size: 12px;
  margin-top: 10px;
  &::after {
    content: "";
    display: block;
    clear: left;
  }

  .price-sort {
    span {
      display: inline-block;
      vertical-align: middle;
      width: 50px;
      height: 22px;
      position: relative;
      line-height: 15px;
      top: -2px;
      left: 0;
    }
    span > div {
      display: inline-block;
      .ivu-icon {
        font-size: 12px;
        position: absolute;
        &:nth-child(1) {
          top: 1px;
        }
        &:nth-child(2) {
          top: 7px;
        }
      }
      .price-color {
        color: #b3b3b3;
      }
    }
  }
}

/* ---------------商品表格开始------------------- */
.goods-table-box .goods-list-box {
  .goods-table {
  }
}

.goods-table {
  h2 {
    padding: 5px 15px;
    font-weight: 600;
    margin: 20px 10px 0;
    position: relative;
  }

  span::before {
    content: " ";
    width: 6px;
    height: 6px;
    background-color: #fe1758;
    left: 2px;
    top: 11px;
    position: absolute;
  }
}

.ellipsis {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Border styles */
#table-1 {
  border-collapse: collapse;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(230, 189, 189);
  margin: 10px 0px;
}
#table-1 thead,
#table-1 tr {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(230, 189, 189);
}
/* Padding and font style */
#table-1 td,
#table-1 th {
  padding: 14px 10px;
  font-size: 14px;
  font-family: Verdana;
  color: rgb(28, 28, 28);
  border: 1px solid #d6dde7;
}
#table-1 th {
  font-size: 15px;
  font-family: Verdana;
  color: rgb(28, 28, 28);
  font-weight: 600;
  background-color: #d6dde7;
}
#table-1 tbody tr {
  cursor: pointer;
}
#table-1 tbody tr td.price {
  color: $theme_color;
}
/* Alternating background colors */
#table-1 tr:nth-child(even) {
  background: rgba(227, 151, 149, 0.3);
}
#table-1 tr:nth-child(odd) {
  background: #fff;
}
#table-1 tbody tr:hover {
  background-color: rgba(227, 151, 149, 0.1);
}
/* ---------------商品表格结束------------------- */

.goods-list-tool li {
  cursor: pointer;
  float: left;
}
.goods-list-tool span {
  padding: 3px 5px;
  border: 1px solid #ccc;
  margin-left: -1px;
  background-color: #fff;
}
.goods-list-tool span:hover {
  border-color: $theme_color;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
.goods-list-tool .ivu-icon {
  font-weight: bold;
  font-size: 16px;
}
.goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: $theme_color !important;
}

/* ---------------商品栏结束------------------- */

.goods-show-img {
  position: relative;
}
</style>
